<template>
  <div class="xuanfuBox">
    <img src="@/assets/fuchuang01.png" v-if="is_xuanfu" @click="is_xuanfu = !is_xuanfu" class="xuanfu" alt="">
    <img src="@/assets/fuchuang02.png" v-else @click="is_xuanfu = !is_xuanfu" class="xuanfu" alt="">
    <div class="div-xuanfu" v-if="!is_xuanfu">
      <div class="item" @click="router({path: './home'})">
        <img src="@/assets/fuchuang03.png" alt="">
        <p class="title">首页</p>
      </div>
      <div class="item" @click="router({path: './publicWelfare'})">
        <img src="@/assets/fuchuang04.png" alt="">
        <p class="title">公益</p>
      </div>
      <div class="item" @click="router({path: './goods'})">
        <img src="@/assets/fuchuang05.png" alt="">
        <p class="title">商城</p>
      </div>
      <div class="item" @click="goTop()">
        <img src="@/assets/fuchuang06.png" alt="">
        <p class="title">顶部</p>
      </div>
      <div class="item" @click="router({path: './offLine'})">
        <img src="@/assets/fuchuang07.png" alt="">
        <p class="title">门店</p>
      </div>
      <div class="item" @click="router({path: './personal'})">
        <img src="@/assets/fuchuang08.png" alt="">
        <p class="title">我的</p>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "xuanfu",
    data () {
      return{
        scrollTop: '',
        is_xuanfu: true,
      }
    },
    methods:{
      handleScroll () {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      },
      goTop(){
        this.is_xuanfu = true
        let timer=null,_that=this;
        cancelAnimationFrame(timer)
        timer=requestAnimationFrame(function fn(){
          if(_that.scrollTop>0){
            _that.scrollTop-=50;
            document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
            timer=requestAnimationFrame(fn)
          }else {
            cancelAnimationFrame(timer);
          }
        })
      },
      router (path) {
        this.$router.push(path)
      },
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);
    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>

<style lang="stylus" scoped>
.xuanfuBox
  .xuanfu
    position fixed
    right 1.5rem
    bottom 4rem
    width 5.6rem
  .div-xuanfu
    background-color rgba(0,0,0,.86)
    border-radius 2.5rem
    width 20.8rem
    height 15.8rem
    overflow hidden
    position fixed
    right 8.4rem
    bottom 10rem
    .item
      width 33.3%
      text-align center
      float left
      height 5.9rem
      margin-top 1.5rem
      color #fff
      img
        width 3.7rem
        display inline-block
</style>
